<template>
  <div class="content_box">
    <FullCalendar v-model:options="calendarOptions" />
  </div>
</template>

<script lang="ts" setup>
import dayGridPlugin from "@fullcalendar/daygrid";
import interactionPlugin from "@fullcalendar/interaction"
import multiMonthPlugin from "@fullcalendar/multiMonth";
import FullCalendar from "@fullcalendar/vue3";
import {computed, onMounted, reactive, ref, watch} from "vue";
import {useMessage} from "naive-ui";
import useUserStore from "@/store/modules/user";
import {post, Response} from "@/api/http";
import {getDayTakeTime4Stat,getGoalDuration} from "@/api/url";
import {convertEvent} from "@/utils";

const message = useMessage()
const userStore = useUserStore()
const data = ref([])
const ids = ref([])

const calendarOptions = reactive({
  plugins: [dayGridPlugin, interactionPlugin,multiMonthPlugin],
  initialView: "dayGridMonth",
  height: 550,
  eventTextColor: "white",
  headerToolbar: {
    left: "title,dayGridMonth,multiMonthYear",
    right: "prev,next, today",
  },
  eventOrderStrict: true,
  eventColor: "green",
  // 设置日程
  events: [
    { title: "event 1", start: "2023-08-25 14:22:00", color: "red", description: "description for Long Event" },
    { title: "event 1", start: "2023-08-25 14:00:00" },
    { title: "event 1", start: "2023-08-25 14:00:00" },
    { title: "event 1", start: "2023-08-25 14:00:00" },
    { title: "event 2", start: "2023-08-24 14:00:00" },
  ],
  editable: false,
  dayMaxEventRows: 5,
  locale: "zh", // 设置语言
  timeZone: userStore.timezone,
});
// onMounted(() => {
//   calendarOptions.events = props.events;
// });

const getData =  async ()=>{
  try {
    const data: Response = await post({
      url: getGoalDuration,
      data: {ids:ids.value},
      token:userStore.getToken()
    });
    console.log(data.data.data)
    // message.success(data.msg)
    return convertEvent(data.data.data, userStore.timezone)
  }catch(e) {
    message.error((e as Error).message)
    return [];
  }finally {
  }
  return [];
}
onMounted(async ()=>{
  data.value = await getData()
  calendarOptions.events = data.value;
})



</script>

<style lang="scss" scoped></style>
